<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>首页</title>
<link rel="stylesheet" href="../static/css/base.css"/>
<link rel="stylesheet" type="text/css" href="../static/css/common.css"/>
<script type="text/javascript" src="../static/js/index/modernizr.custom.26887.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="../static/css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/fallback.css" />
    <![endif]-->
</head>
<body>
<img class="hide" src="../static/img/loading.gif"/>
<div class="container">   
  <!-- head-->
  <div class="head"> 
  	<a href="#"><strong>logo </strong>标题</a> 
  	<span class="nav fr"> 
    	<a href="#register" data-toggle="modal" data-keyboard="ture" data-backdrop="true">注册</a> 
      <a href="#login" data-toggle="modal" data-keyboard="ture" data-backdrop="true">登录</a>
    </span> 
  </div>
  <!--head-end-->  
  <header class="h-title">
    <h1>Animated Responsive Image Grid</h1>
    <h2>Cycling through a set of images in a responsive grid.</h2>
    <nav class="h-nav">
        <a class="active" href="#">首页</a>
        <a href="#">Demo 2</a>
        <a href="#">Demo 3</a>
    </nav>
  </header>
  <section class="main">
    <div id="ri-grid" class="ri-grid ri-grid-size-2">
      <ul>
        <li><a href="#"><img src="../static/img/medium/1.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/2.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/3.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/4.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/5.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/6.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/7.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/8.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/9.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/10.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/11.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/12.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/13.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/14.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/15.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/16.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/17.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/18.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/19.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/20.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/21.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/22.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/23.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/24.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/25.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/26.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/27.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/28.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/29.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/30.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/31.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/32.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/33.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/34.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/35.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/36.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/37.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/38.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/39.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/40.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/41.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/42.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/43.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/44.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/45.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/46.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/47.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/48.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/49.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/50.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/51.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/52.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/53.jpg"/></a></li>
        <li><a href="#"><img src="../static/img/medium/54.jpg"/></a></li>
      </ul>
    </div>
  </section>
  <footer><p class="copyright"><strong>Copyright ©2012 :</strong>TuZhan.Com All Rights Reserved 蜀ICP备10207566号-8</p></footer>
</div>
<!--
-------------modals-->
<!--注册-->
<div class="modal hide fade clearfix" id="register">
    <div class="modal-left">
      <form>
      		<legend>新用户注册</legend>
            <fieldset>
                <div class="form-group">
                    <label for="user_name">用户名</label>
                    <input type="text" name="user_name" id="user_name" tabindex="1" placeholder="由英文和数字组成">
                </div>
                <div class="form-group error">
                    <label for="password">密码</label>
                    <input type="password" name="password" id="password" tabindex="2">
                </div>
                <div class="form-group">
                    <label for="confirm_password">重复密码</label>
                    <input type="password" name="confirm_password" id="confirm_password" tabindex="3">
                </div>
                <div class="form-group captcha">
                    <label for="captcha_solution">验证码</label>
                    <input type="text" name="captcha_solution" id="captcha_solution" tabindex="4">
                </div>
                <img alt="captcha" width="130" height="35" class="captcha" title="看不清楚?点图片可以换一个" src="../static/img/captcha.jpg">
                <div class="recsubmit">
                      <label for="agreement">
                        <input type="checkbox" name="agreement" id="agreement" tabindex="5">阅读并同意《<a href="#" target="_blank">使用协议</a>》
                      </label>
                    <input type="submit" class="btn-blue" value="完成注册">
                </div>
            </fieldset>
        </form> 
    </div>
	<div class="modal-right">
    <a class="close" data-dismiss="modal" >×</a>
    <div class="third-party-mod">
        <p>用其他帐号登录:</p>
        <div class="social">
            <a class="qq" title="qq" rel="author" href="https://plus.google.com/117236344655673213049">QQ</a>
            <a class="sina" title="新浪" href="http://sina.com">新浪</a>
            <a class="renren" title="人人" href="http://renren.com">人人</a>
            <a class="facebook" title="Facebook" href="http://www.facebook.com/elct9620">Facebook</a>
            <a class="twitter" title="Twitter" href="http://twitter.com/elct9620">Twitter</a>
         </div>
      </div>
    <div class="login-mod">
        <p>已经有账户?</p>
        <p> <a href="#" target="_blank">现在登录</a> </p>
      </div>
  </div>
</div>
<!--登录-->
<div class="modal hide fade clearfix" id="login">
    <div class="modal-left">
      <form>
      		<legend>登录</legend>
            <fieldset>
                <div class="form-group">
                    <label for="login_name">用户名</label>
                    <input type="text" name="user_name" id="login_name" tabindex="1">
                </div>
                <div class="form-group error">
                    <label for="login_password">密码</label>
                    <input type="password" name="password" id="login_password" tabindex="2">
                </div>
                <div class="form-group captcha">
                    <label for="login_captcha_solution">验证码</label>
                    <input type="text" name="captcha_solution" id="login_captcha_solution" tabindex="3">
                </div>
                <img alt="captcha" width="130" height="35" class="captcha" title="看不清楚?点图片可以换一个" src="../static/img/captcha.jpg">
                <div class="recsubmit">
                      <label for="remember">
                        <input type="checkbox" name="agreement" id="remember" tabindex="4">下次自动登录
                      </label>
                      <a class="a-blue" href="#" target="_blank">忘记密码？</a> 
                    <input  type="submit" class="btn-blue" value="登录">
                </div>
            </fieldset>
        </form> 
    </div>
	<div class="modal-right">
    <a class="close" data-dismiss="modal" >×</a>
    <div class="third-party-mod">
        <p>用其他帐号登录:</p>
        <div class="social">
            <a class="qq" title="qq" rel="author" href="https://plus.google.com/117236344655673213049">QQ</a>
            <a class="sina" title="新浪" href="http://sina.com">新浪</a>
            <a class="renren" title="人人" href="http://renren.com">人人</a>
            <a class="facebook" title="Facebook" href="http://www.facebook.com/elct9620">Facebook</a>
            <a class="twitter" title="Twitter" href="http://twitter.com/elct9620">Twitter</a>
         </div>
      </div>
    <div class="login-mod">
        <p>没有账户?</p>
        <p> <a href="#" target="_blank">立即注册</a> </p>
      </div>
  </div>
</div>
<!--end
-------------modals-->
<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="../static/js/index/jquery.transit.min.js"></script> 
<script type="text/javascript" src="../static/js/index/jquery.gridrotator.js"></script>
<script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript">	
			$(function() {
				$( '#ri-grid' ).gridrotator( {
					rows		: 3,
					columns		: 15,
					animType	: 'fadeInOut',
					animSpeed	: 1000,
					interval	: 600,
					step		: 1,
					w320		: {
						rows	: 3,
						columns	: 4
					},
					w240		: {
						rows	: 3,
						columns	: 4
					}
				} );
			
			});
		</script>
</body>
</html>